import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'

import './index.less'

type ICommonEmptyViewProps = {
  bgColor: string,
  contentBgColor: string,
  titleColor: string,
  icon: string,
  title: string,
  mainTop: number,
  iconW: number,
  iconH: number,
  iconTop: number,
  titleTop: number
}

// 通用空视图
export default class CommonEmptyView extends Component<ICommonEmptyViewProps, {}> {

  static defaultProps = {
    bgColor: '#f4f4f4',
    contentBgColor: '#fff',
    titleColor: '#333',
    mainTop: 90,
    iconW: 204,
    iconH: 204,
    iconTop: 120,
    titleTop: 80
  }

  render () {
    const { bgColor, mainTop, contentBgColor, icon, title, iconH, iconW, iconTop, titleTop, titleColor } = this.props

    return (
      <View className='container' style={`background-color:${bgColor};`}>
        <View style={`height: ${mainTop}rpx;`}></View>
        <View className="main-content" style={`background-color:${contentBgColor};`}>
          <Image className="empty-icon" src={icon} style={`width:${iconW}rpx; height:${iconH}rpx; margin-top:${iconTop}rpx;`}></Image>
          <View className="empty-title" style={`margin-top: ${titleTop}rpx; color:${titleColor};`}>{title}</View>
        </View>
      </View>
    )
  }
}
